<template>
	<view class="wrapper woDe">
		<div class="flex-start" @click="open('./xinXi/xinXi')" v-if="uinfo.token">
			<image src="../../static/woDe/avatar.png" mode="aspectFill" class="avatar bor50"></image>
			<div class="f32 fbold ml15 mr5">{{uinfo.nickName}}</div>
			<u-icon name="edit-pen-fill" color="#2979ff" size="20"></u-icon>
		</div>
		<div class="flex-start" @click="login" v-else>
			<image src="../../static/woDe/login.png" mode="aspectFill" class="avatar bor50"></image>
			<div class="f32 fbold ml15 mr5">登录/注册</div>
		</div>
		<div class="center book-box mt40 mb30" @click="open('./shuGui/shuGui')">
			<image src="../../static/woDe/shu.png" mode="widthFix" class="book-icon mr20"></image>
			<div class="flex1 f28">智能书柜</div>
			<u-icon name="arrow-right" color="#000" size="14"></u-icon>
		</div>
		<div class="space-between fWrap">
			<div class="nav-box center posr" @click="open('./fuWu/fuWu')">
				<image src="../../static/woDe/ni1.png" mode="widthFix" class="posa"></image>
				<div class="f28">服务预约记录</div>
			</div>
			<div class="nav-box center posr" @click="open('./shangMen/shangMen')">
				<image src="../../static/woDe/ni2.png" mode="widthFix" class="posa"></image>
				<div class="f28">预约上门记录</div>
			</div>
			<div class="nav-box center posr" @click="open('./banShi/banShi')">
				<image src="../../static/woDe/ni3.png" mode="widthFix" class="posa"></image>
				<div class="f28">预约办事记录</div>
			</div>
			<div class="nav-box center posr" @click="open('./liuYan/liuYan')">
				<image src="../../static/woDe/ni4.png" mode="widthFix" class="posa"></image>
				<div class="f28">留言记录</div>
			</div>
			<div class="nav-box center posr" @click="open('./juBao/juBao')">
				<image src="../../static/woDe/ni5.png" mode="widthFix" class="posa"></image>
				<div class="f28">举报记录</div>
			</div>
			<div class="nav-box center posr" @click="showMobile=true">
				<image src="../../static/woDe/ni6.png" mode="widthFix" class="posa"></image>
				<div class="f28">联系我们</div>
			</div>
		</div>
		<u-action-sheet @select="select" @close="showMobile=false" round="12" cancelText="关闭" :actions="list"
			title="联系我们" :show="showMobile" :safeAreaInsetBottom="false"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showMobile: false,
				list: [{
					name: ' 0832-3996595',
					color: '#000',
					fontSize: '14'
				}, ],
				uinfo: {}
			}
		},
		onShow() {
			this.uinfo=uni.getStorageSync('uinfo')
		},
		methods: {
			login() {
				let that = this
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(res) {

						that.$http('/applet/login', {
							code: res.code
						}).then(r => {
							console.log(r);
							that.uinfo = r
							uni.setStorageSync('uinfo', r)
							uni.showToast({
								title: '登陆成功'
							})
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.nav-box {
		width: 320rpx;
		height: 180rpx;
		margin-bottom: 32rpx;

		&:nth-of-type(1) {
			color: #FF9900;
			background: url(@/static/woDe/nb1.png);
			background-size: cover;
		}

		&:nth-of-type(2) {
			color: #9A5BEC;
			background: url(@/static/woDe/nb2.png);
			background-size: cover;
		}

		&:nth-of-type(3) {
			color: #408CF6;
			background: url(@/static/woDe/nb3.png);
			background-size: cover;
		}

		&:nth-of-type(4) {
			color: #1FC5C5;
			background: url(@/static/woDe/nb4.png);
			background-size: cover;
		}

		&:nth-of-type(5) {
			color: #FC6A53;
			background: url(@/static/woDe/nb5.png);
			background-size: cover;
		}

		&:nth-of-type(6) {
			color: #1EC551;
			background: url(@/static/woDe/nb6.png);
			background-size: cover;
		}

		.posa {
			width: 74rpx;
			height: 74rpx;
			top: 10rpx;
			left: 8rpx;
		}
	}

	.book-box {
		width: 672rpx;
		height: 80rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 119, 255, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 0 40rpx;

		.book-icon {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
	}

	.woDe {
		padding: 18rpx 38rpx;
	}
</style>